<template>
  <div id="zb_app">
    <!-- 头部 -->
    <header>
      <span>
        <b>用户名:</b>
        {{this.$store.state.user}}
      </span>
      <span>
        <el-button type="danger" size="mini" @click="zb_tui">退出</el-button>
      </span>
    </header>
    <!-- 头部 -->
    <!-- 中间 -->
    <section>
      <span>每年领红包，年卡仅0.12/天</span>
      <van-button type="primary" size="mini">立即开通 ></van-button>
    </section>
    <!-- 中间 -->
    <!-- 底部 -->
    <footer>
      <img src="@/assets/img/我的.png" alt />
    </footer>
    <!-- 底部 -->
  </div>
</template>

<script>
//引入 Diolog弹出框
import { Dialog } from "vant";
//引入Toast轻提示
import { Toast } from "vant";
//引入bottstrap样式
import "@/assets/bootstrap.css";
export default {
  // 组件名称
  name: "",
  // 组件参数 接收来自父组件的数据
  props: [],
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {};
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    //退出
    zb_tui() {
      Dialog.confirm({
        title: "提示",
        message: "你确定退出吗？"
      })
        //确定
        .then(() => {
          //清除token值
          sessionStorage.clear(this.$store.state.token);
          //跳转到登陆页面
          this.$router.push("/login");
          //退出成功
          Toast.success("退出成功");
        })
        //取消
        .catch(() => {
          Toast.fail("取消退出");
          return false;
        });
    }
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 在实例初始化之后，组件属性计算之前，如data属性等
   */
  beforeCreate() {},
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * 在挂载开始之前被调用：相关的 render 函数首次被调用。
   */
  beforeMount() {},
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  /**
   * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
   * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
   */
  beforeUpdate() {},
  /**
   * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
   * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
   */
  updated() {},
  /**
   * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
   */
  activated() {},
  /**
   * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
   */
  deactivated() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {}
};
</script>

<style lang="scss" scoped>
#zb_app {
  width: 100%;
  height: 100%;
  //头部
  header {
    width: 100%;
    height: 100px;
    background: #0066ff;
    color: white;
    display: flex;
    justify-content: space-around;
    // align-items: center;
    padding-top: 20px;
    //icon小图标
    .van-icon {
      font-size: 25px;
      background: white;
    }
  }
  //中间
  section {
    width: 80%;
    height: 30px;
    background: rgba(7, 5, 5, 0.89);
    border-radius: 5px;
    position: absolute;
    text-align: center;
    top: 70px;
    left: 40px;
    span {
      color: white;
      font-size: 12px;
    }
    .van-button {
      margin-left: 50px;
      position: relative;
      top: 2px;
    }
  }
  //底部
  footer {
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
